<template>
	<!-- #ifndef APP-NVUE -->
	<view class="tmSkeletonLine flex-12 my-10 " :class="[`round-${props.round}`]" :style="[
		{ backgroundColor: isDark ? '#1e1e1e' : '#ebebeb' },
		{ paddingTop: props.height / 2 + 'rpx', paddingBottom: props.height / 2 + 'rpx' },
	]"></view>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<view ref="dombg" class="tmSkeletonLine flex-12 my-10  " :class="[`round-${props.round}`]"  :style="[
		{ backgroundColor: isDark ? '#1e1e1e' : '#ebebeb' },
		{ paddingTop: props.height / 2 + 'rpx', paddingBottom: props.height / 2 + 'rpx' },
	]"></view>
	<!-- #endif -->
</template>

<script lang="ts" setup>
/**
 * 骨架屏-元素
 * @description 骨架加载状态屏元素，可以使用本元素组件自由的组合出你想要的任意加载造型，这对自定义骨架形状非常有用。
 */
import {
	getCurrentInstance,
	computed,
	onMounted,
	onUnmounted,
	nextTick,
	watch
} from 'vue';
import {
	computedDark
} from '../../tool/lib/minxs';
import { useTmpiniaStore } from '../../tool/lib/tmpinia';
const store = useTmpiniaStore();
// #ifdef APP-PLUS-NVUE
const animation = uni.requireNativePlugin('animation')
// #endif
const props = defineProps({
	height: {
		type: Number,
		default: 60
	},
	dark: {
		type: [Boolean,String],
		default: false
	},
	//是否跟随全局主题的变换而变换
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	//是否跟随主题全局切换暗黑模式。
	followDark: {
		type: [Boolean, String],
		default: true
	},
	//圆角。
	round: {
		type: Number,
		default: 4
	},
});
const proxy = getCurrentInstance()?.proxy??null;
// 设置响应式全局组件库配置表。
const tmcfg = computed(() => store.tmStore);

const isDark = computed(() => computedDark(props, tmcfg.value));

onMounted(() => {
	// #ifdef APP-PLUS-NVUE
	try {
		nextTick(function () {
			setTimeout(function() {
				spinNvueAni();
			}, 50); 
		});
	} catch (e) {
		//TODO handle the exception
	}
	// #endif
})


// function getEl(el) {
// 	if (typeof el === "string" || typeof el === "number") return el;
// 	if (WXEnvironment) {
// 		return el.ref;
// 	} else {
// 		return el instanceof HTMLElement ? el : el.$el;
// 	}
// }

function spinNvueAni(opacity=0) {
	let icon = proxy?.$refs?.dombg
	if (!icon) return;
	animation.transition(icon, {
		styles: {
			opacity:opacity,
		},
		duration: 1000, //ms
		timingFunction: 'linear',
		delay: 0 //ms
	},()=>{
		nextTick(function () {
			spinNvueAni(opacity==0?1:0)
		});
	})
}
</script>

<style scoped>
/* #ifndef APP-NVUE */
.tmSkeletonLine {
	animation: loading 1s linear infinite;
}

@keyframes loading {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* #endif */
</style>
